$(function () {
    echarts_map();

    function echarts_map() {
        var myChart = echarts.init(document.getElementById('bigmap3'));

        // 设置一个定时器来延迟初始化图表
        setTimeout(function () {
            var option = {
                // 图表配置
                legend: {
                    textStyle: {
                        color: '#ffffff' // 设置图例标签字体颜色为白色
                    }
                },
                tooltip: {
                    trigger: 'axis',
                    showContent: false
                },
                dataset: {
                    source: [
                        ['房型', '2013', '2014', '2015', '2016', '2017', '2018', '2019', '2020', '2021', '2022', '2023'],
                        ['标准间', 351, 415, 425, 398, 405, 270, 432, 346, 250, 267, 403],
                        ['大床房', 343, 402, 488, 496, 429, 299, 481, 407, 354, 444, 305],
                        ['双床房', 480, 420, 281, 427, 381, 300, 400, 318, 393, 408, 354],
                        ['家庭房', 234, 400, 238, 441, 324, 286, 360, 354, 274, 288, 392],
                        ['情侣房', 422, 334, 413, 351, 216, 480, 255, 415, 443, 477, 436],
                        ['主题房', 442, 442, 345, 331, 377, 273, 451, 387, 242, 373, 317],
                        ['蜜月房', 255, 488, 350, 336, 274, 333, 316, 220, 277, 255, 384]
                    ]
                },
                xAxis: {
                    type: 'category',
                    axisLine: {
                        lineStyle: {
                            color: '#ffffff' // X轴颜色设为白色
                        }
                    }
                },
                yAxis: {
                    gridIndex: 0,
                    axisLine: {
                        lineStyle: {
                            color: '#ffffff' // Y轴颜色设为白色
                        }
                    }
                },
                grid: {
                    top: '55%'
                },
                series: [
                    {
                        type: 'line',
                        smooth: true,
                        seriesLayoutBy: 'row',
                        emphasis: {
                            focus: 'series'
                        }
                    },{
                        type: 'line',
                        smooth: true,
                        seriesLayoutBy: 'row',
                        emphasis: {
                            focus: 'series'
                        }
                    },{
                        type: 'line',
                        smooth: true,
                        seriesLayoutBy: 'row',
                        emphasis: {
                            focus: 'series'
                        }
                    },
                    {
                        type: 'line',
                        smooth: true,
                        seriesLayoutBy: 'row',
                        emphasis: {
                            focus: 'series'
                        }
                    },
                    {
                        type: 'line',
                        smooth: true,
                        seriesLayoutBy: 'row',
                        emphasis: {
                            focus: 'series'
                        }
                    },
                    {
                        type: 'line',
                        smooth: true,
                        seriesLayoutBy: 'row',
                        emphasis: {
                            focus: 'series'
                        }
                    },
                    {
                        type: 'line',
                        smooth: true,
                        seriesLayoutBy: 'row',
                        emphasis: {
                            focus: 'series'
                        }
                    },
                    {
                        type: 'pie',
                        id: 'pie',
                        radius: '30%',
                        center: ['50%', '25%'],
                        emphasis: {
                            focus: 'self'
                        },
                        label: {
                            color: '#ffffff', // 字体颜色设为白色
                            formatter: '{b}: {@2022} ({d}%)'
                        },
                        encode: {
                            itemName: '房型',
                            value: '2022',
                            tooltip: '2022'
                        }
                    }
                ]
            };
            myChart.on('updateAxisPointer', function (event) {
                const xAxisInfo = event.axesInfo[0];
                if (xAxisInfo) {
                    const dimension = xAxisInfo.value + 1;
                    myChart.setOption({
                        series: {
                            id: 'pie',
                            label: {
                                color: '#ffffff', // 字体颜色设为白色
                                formatter: '{b}: {@[' + dimension + ']} ({d}%)'
                            },
                            encode: {
                                value: dimension,
                                tooltip: dimension
                            }
                        }
                    });
                }
            });

            myChart.setOption(option);
            window.addEventListener("resize", function () {
                myChart.resize();
            });
        }, 0);
    }
});